import React, {Component} from 'react';
import {Text,View} from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import PopularTop from "../pages/top/PopularTop";
import NavigationBar from "../common/NavigationBar";
const THEME_COLOR = '#678';  // 主题颜色

const Tab = createMaterialTopTabNavigator();

// 最热页面顶部可滑动导航栏，引用最热页面内容
export default class PopularTopNavigation extends Component {
  constructor(props){
    super(props);
    this.state = {
      language: ['js','java','python','c','c++','c#','ruby','php']
    }
  }

  render() {
    let {language} = this.state;

    // 顶部状态栏
    let statusBar = {
      backgroundColor: THEME_COLOR,
      barStyle:'light-content'
    };

    // 顶部导航栏
    let navigationBar = <NavigationBar
      title={'最热'}
      statusBar={statusBar}
      style={{backgroundColor:THEME_COLOR}}
    />;

    return (
      <View style={{flex:1}}>
        {/* 顶部状态栏和导航栏 */}
        {navigationBar}
        <Tab.Navigator tabBarOptions={{
          initialRouteName:language[0],
          scrollEnabled:true,
          tabStyle:{width:100},
          activeTintColor:'#fff',
          inactiveTintColor:'#c5c5c5',
          style:{backgroundColor:THEME_COLOR},
          indicatorStyle:{borderWidth:1,borderColor:'#fff'},
        }} lazy={true} lazyPlaceholder={this.loading}>
          {
            language.map((item,i)=>{
              return <Tab.Screen name={item} component={PopularTop} key={i+item} options={{
                tabBarLabel:({color})=><Text style={{color:color}}>{item}</Text>,
              }}/>
            })
          }
        </Tab.Navigator>
      </View>
    );
  }

  loading = () => {
    return <Text>正在加载中...</Text>
  }
}
